<extend name="./public/frame.html"/>
<block name="content">
	<blockquote class="layui-elem-quote search">
		<div class="layui-inline">
			<input type="text" class="layui-input date" readonly id="online_start" placeholder="上线开始时间" style="width: 180px;">
		</div>
		<div class="layui-inline">
			<input type="text" class="layui-input date" readonly id="online_end" placeholder="上线结束时间" style="width: 180px;">
		</div>
		<div class="layui-inline">
			<input type="text" class="layui-input date" readonly id="offline_start" placeholder="下线开始时间" style="width: 180px;">
		</div>
		<div class="layui-inline">
			<input type="text" class="layui-input date" readonly id="offline_end" placeholder="下线结束时间" style="width: 180px;">
		</div>
		<div class="layui-inline">
			<input type="text" lay-verify="required|title" required placeholder="请输入手机号" class="layui-input" id="driver_phone">
		</div>
		<div class="layui-inline">
			<button class="layui-btn" data-type="search">搜索</button>
		</div>
	</blockquote>
	<table class="layui-table" lay-data="{width:'auto', height:'auto', url:'{:url('Driver/onlineList')}', page: true, limit: 10, id:'driver'}" lay-filter="driver">
		<thead>
			<tr>
				<th lay-data="{field:'id', width:70,fixed: true, sort: true,align:'center',fixed: true}">ID</th>
				<th lay-data="{field:'driver_id', width:120,align:'center'}">司机ID</th>
				<th lay-data="{field:'driver_name', width:150,align:'center'}">司机姓名</th>
				<th lay-data="{field:'driver_phone', width:150,align:'center'}">手机号码</th>
				<th lay-data="{field:'start_time', width:160,align:'center'}">上线时间</th>
				<th lay-data="{field:'end_time', width:160,align:'center'}">下线时间</th>
				<th lay-data="{field:'sum_time', width:160,align:'center'}">在线时长</th>
				<th lay-data="{field:'city', width:160,align:'center'}">城市</th>
			</tr>
		</thead>
	</table>
	<script type="application/javascript">
		layui.use(['table', 'form', 'laydate'], function () {
			var table = layui.table, form = layui.form
				, laydate = layui.laydate;
			lay('.date').each(function(){
				laydate.render({
					elem: this
					,type: 'datetime'
					,trigger: 'click'
				});
			});
			//搜索
			var $ = layui.jquery, active = {
				search: function () {
					var online_start 	= $('#online_start').val(),				//时间 - 开始
						online_end 		= $('#online_end').val(),				//时间 - 结束
						offline_start 	= $('#offline_start').val(),				//在线开始时间
						offline_end 	= $('#offline_end').val(),				//在线结束时间
						driver_phone	= $('#driver_phone').val();
					table.reload('driver', {
						url: '/admin/Driver/onlineList', where: {
							"online_start" : online_start,
							"online_end" : online_end,
							"offline_start" : offline_start,
							"offline_end" : offline_end,
							"driver_phone" : driver_phone,
						}
					});
				}
			};
			$('.layui-btn').on('click', function () {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});
		});
	</script>
</block>
